<template>
  <view class="index">
    <view class="jtop">
      <view class="status_bar"><!-- 这里是状态栏 --></view>
      <view class="jtop_l" @tap="navigateBack"
        ><image src="../../static/img/ic_back.png"></image
      ></view>
      <view class="jtop_c">关于墨斗</view>
    </view>
    <view class="tophr"></view>

    <image src="../../static/img/logo.png" class="ua_t"></image>
    <text class="ua_t1">墨斗</text>
    <text class="ua_t2">V{{ ver }}</text>

    <view class="ua_as">
      <view class="ua_a" @click="to_gzh">
        <image
          src="../../static/img/user/ic_wechat_1.png"
          class="ua_a1"
        ></image>
        <text class="ua_a2">墨斗微信公众号</text>
        <image src="../../static/img/user/ic_right.png" class="ua_a3"></image>
      </view>
      <view class="ua_a" @click="to_wb">
        <image src="../../static/img/user/ic_weibo.png" class="ua_a1"></image>
        <text class="ua_a2">官方微博</text>
        <image src="../../static/img/user/ic_right.png" class="ua_a3"></image>
      </view>
      <view class="ua_a">
        <image src="../../static/img/user/ic_mail.png" class="ua_a1"></image>
        <text class="ua_a2">官方邮箱</text>
        <text class="ua_a4" @click="paste(jmail)">{{ jmail }}</text>
      </view>
      <view class="ua_a" @click="sj">
        <image src="../../static/img/user/sj.png" class="ua_a1"></image>
        <text class="ua_a2">检查新版本</text>
        <image src="../../static/img/user/ic_right.png" class="ua_a3"></image>
        <text class="ua_a4">V{{ ver }}</text>
      </view>
    </view>

    <text class="ua_t3">© 2020 modou.com All Rights Reserved.</text>

    <!-- 弹出层 -->
    <view :class="[aashowpop2 ? 'tc' : 'tc hide']">
      <view class="jtop_bj" @click="abtTC3"></view>

      <view class="tc_box">
        <view class="tc_boxt">
          墨斗微信公众号
        </view>
        <view class="tc_boxtc">
          请打开微信 - 点击右上角搜索按钮 - 添加 "modor" 公众号
        </view>
        <view class="tc_f">
          <!-- <view class="tc_fl" @click="jshow_pop">取消</view> -->
          <view class="tc_fr" @click="abtTC22">确定</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import request from '@/common/request.js';
import { mapState, mapMutations } from 'vuex';

export default {
  data() {
    return {
      jmail: 'market@modor.com',
      wb: 'https://weibo.cn/mlito',
      gzh: 'modor',
      ver: '1.0.6',
      aashowpop2: false,
    };
  },
  onShow() {
    //#ifdef APP-PLUS
    this.ver = plus.runtime.version;
    //#endif
  },
  methods: {
    abtTC3() {
      this.aashowpop2 = false;
    },
    abtTC22() {
      uni.setClipboardData({
        data: this.gzh,
      });
      this.aashowpop2 = false;
    },
    to_gzh() {
      this.aashowpop2 = true;
      // uni.showModal({
      //     title: '墨斗微信公众号',
      //     content: '请打开微信 - 点击右上角搜索按钮 - 添加 "modor" 公众号',
      // 	// showCancel:false,
      // 	confirmText:"复制去添加",
      //     success: function (res) {
      //         if (res.confirm) {
      // 			uni.setClipboardData({
      // 				data: this.gzh
      // 			});
      //             console.log('用户点击确定');
      //         } else if (res.cancel) {
      //             console.log('用户点击取消');
      //         }
      //     }
      // });
    },
    sj() {
      console.log('plus.runtime.appid:', plus.runtime.appid);

      console.log('plus.runtime.version:', plus.runtime.version);
      console.log('pterminal:', uni.getSystemInfoSync().platform);
      var server = `/biz/app/version`; //检查更新地址
      var req = {
        //升级检测数据
        // appId: plus.runtime.appid,
        version: plus.runtime.version,
        terminal: uni.getSystemInfoSync().platform,

        // "appid": "__UNI__F05B55B",
        // "version": "1.0.0",
        // "terminal":"android"
      };
      request({
        url: server,
        data: req,
        method: 'GET',
        header: uni.getStorageSync('jkcs'),

        success: openIdRes => {
          console.log('检查更新：', openIdRes);
          if (openIdRes.data.success == true) {
            if (openIdRes.data.data.status === 1) {
              uni.showModal({
                //提醒用户更新
                title: '更新提示',
                content: openIdRes.data.data.note,
                success: res => {
                  if (res.confirm) {
                    plus.runtime.openURL(openIdRes.data.data.url);
                  }
                },
              });
            } else {
              wx.showToast({
                title: '当前为最新版本',
                icon: 'none',
                duration: 1000,
              });
            }
          } else {
            wx.showToast({
              title: '更新失败，请稍后再试',
              icon: 'none',
              duration: 1000,
            });
          }
        },
      });
    },
    to_wb() {
      uni.navigateTo({
        url: '../reg/vw?title=官方微博&url=' + this.wb,
      });
    },
    paste(value) {
      console.log(value);
      uni.setClipboardData({
        data: value,
      });
    },
    bindLogout() {
      this.logout();
      /**
       * 如果需要强制登录跳转回登录页面
       */
      if (this.forcedLogin) {
        uni.reLaunch({
          url: '../login/login',
        });
      }
    },
    navigateBack() {
      uni.navigateBack();
    },
  },
};
</script>

<style>
.ua_t {
  width: 180rpx;
  height: 180rpx;
  display: block;
  float: right;
  margin: 110rpx 285rpx 0;
  border-radius: 24rpx;
}
.ua_t1 {
  width: 100%;
  height: auto;
  display: block;
  float: right;
  font-size: 36rpx;
  line-height: 44rpx;
  text-align: center;
  color: #000000;
  margin: 20rpx 0rpx 0 0;
}
.ua_t2 {
  width: 100%;
  height: auto;
  display: block;
  float: right;
  font-size: 24rpx;
  line-height: 32rpx;
  text-align: center;
  color: #999999;
  margin: 10rpx 0rpx 0 0;
}
.ua_t3 {
  width: 100%;
  height: auto;
  display: block;
  position: fixed;
  left: 0;
  bottom: 50rpx;
  float: right;
  font-size: 24rpx;
  line-height: 32rpx;
  text-align: center;
  color: #999999;
  margin: 300rpx 0rpx 0 0;
}

.ua_as {
  width: 100%;
  height: auto;
  display: block;
  float: left;
  margin: 20rpx 0 0 0;
  border: 1px solid #dddddd;
  border-left: 0;
  border-right: 0;
  background: #ffffff;
}
.ua_a {
  width: 720rpx;
  height: 90rpx;
  display: block;
  float: right;
  line-height: 90rpx;
  border-bottom: 1px solid #dddddd;
}
.ua_as .ua_a:last-child {
  border: 0;
}
.ua_a1 {
  width: 48rpx;
  height: 48rpx;
  display: block;
  float: left;
  margin: 22rpx 32rpx 0 0;
}
.ua_a2 {
  width: auto;
  height: auto;
  display: block;
  float: left;
  font-size: 34rpx;
  line-height: 45rpx;
  color: #000000;
  margin: 25rpx 0 0 0;
}
.ua_a3 {
  width: 16rpx;
  height: 25rpx;
  display: block;
  float: right;
  margin: 32rpx 30rpx 0 0;
}
.ua_a4 {
  width: auto;
  height: auto;
  display: block;
  float: right;
  font-size: 32rpx;
  line-height: 45rpx;
  color: #999999;
  margin: 26rpx 30rpx 0 0;
}

.ub_t {
  width: auto;
  height: 40rpx;
  display: block;
  float: right;
  font-size: 32rpx;
  line-height: 40rpx;
  text-align: right;
  color: #999999;
  margin: 25rpx 20rpx 0 0;
}
.ub_t image {
  width: 36rpx;
  height: 36rpx;
  display: block;
  float: right;
  margin: 0rpx 0rpx 0 6rpx;
}
.ub_tx {
  width: 114rpx;
  height: 114rpx;
  display: block;
  float: right;
  margin: 30rpx 20rpx 30rpx 0;
  border-radius: 8rpx;
}
.uba {
  height: auto;
}
.uba .ub_l {
  margin-top: 45rpx;
}
.uba .ub_jt {
  margin-top: 75rpx;
}
.ubscc {
  text-align: center;
  line-height: 90rpx;
  color: #eb5342;
  font-size: 32rpx;
}
.js {
  width: 720rpx;
  height: auto;
  display: block;
  float: right;
  margin: 25rpx 0 10rpx;
  font-size: 28rpx;
  line-height: 36rpx;
  color: #888888;
}

.index {
  background: rgb(242, 242, 242);
  width: 100%;
  height: auto;
}
.jtop {
  width: 100%;
  height: 88rpx;
  background: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  box-shadow: inset 0px -1px 0px #dddddd;
}
.jtop_l {
  width: auto;
  height: 88rpx;
  display: block;
  float: left;
  font-size: 32rpx;
  color: #000000;
  line-height: 88rpx;
  margin: 0 0 0 30rpx;
}
.jtop_l image {
  width: 48rpx;
  height: 48rpx;
  display: block;
  float: left;
  margin: 20rpx 0 20rpx 0;
}
.jtop_lt {
  margin: 0 0 0 10rpx;
}
.jtop_r {
  width: 48rpx;
  height: 48rpx;
  display: block;
  float: right;
  margin: 20rpx 20rpx 0 0;
}
.jtop_rl {
  margin: 20rpx 30rpx 0 0;
}
.jtop_r image {
  width: 48rpx;
  height: 48rpx;
  display: block;
  float: left;
}
.jtop_c {
  width: 70%;
  height: 48rpx;
  line-height: 48rpx;
  display: block;
  float: left;
  position: fixed;
  top: 20rpx;
  left: 15%;
  text-align: center;
  font-size: 36rpx;
  color: #000000;
}
.jtop_c image {
  width: 36rpx;
  height: 36rpx;
  display: inline-block;
  float: none;
  margin-bottom: -5rpx;
  margin-left: 5rpx;
}
.jtop_b {
  width: 100%;
  height: auto;
  background: #ffffff;
  position: fixed;
  top: 88rpx;
  left: 0;
  z-index: 1001;
}
.tophr {
  width: 100%;
  height: 88rpx;
}

.tc {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  display: block;
}

.tc_box {
  width: 540rpx;
  height: auto;
  background: #ffffff;
  border-radius: 14rpx;
  margin: 460rpx 105rpx 0;
  position: relative;
  z-index: 10001;
  overflow: hidden;
}
.tc_boxt {
  width: 100%;
  height: 44rpx;
  font-size: 36rpx;
  line-height: 44rpx;
  display: block;
  float: left;
  text-align: center;
  margin: 40rpx 0 20rpx;
  color: #000000;
}
.tc_boxtc {
  width: 100%;
  height: 36rpx;
  font-size: 28rpx;
  line-height: 36rpx;
  display: block;
  float: left;
  text-align: center;
  margin: 0rpx 0 30rpx;
  color: #666666;
}
.tc_boxi {
  width: 460rpx;
  height: 88rpx;
  background: #ffffff;
  border-radius: 8rpx;
  border: 1px solid #dddddd;
  display: block;
  float: left;
  margin: 0rpx 40rpx 22rpx 40rpx;
}
.tc_boxi input {
  width: 70%;
  height: 48rpx;
  margin: 20rpx 5%;
  font-size: 32rpx;
  color: #000000;
  float: left;
}
.tc_boxi image {
  width: 36rpx;
  height: 36rpx;
  display: block;
  float: right;
  margin: 26rpx 20rpx 0rpx 0;
}
.tc_f {
  width: 100%;
  height: 100rpx;
  display: block;
  float: left;
  border-top: 1px solid #dcdee3;
  margin: 20rpx 0 0;
}
.tc_fl {
  width: 269rpx;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  font-size: 36rpx;
  color: #256aff;
  display: block;
  float: left;
  border-right: 1px solid #dcdee3;
}
.tc_fr {
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  font-size: 36rpx;
  color: #256aff;
  display: block;
  float: left;
}
.tc_fr2 {
  width: 269rpx;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  font-size: 36rpx;
  color: #eb5342;
  display: block;
  float: left;
}
.jtop_bj {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 997;
}
</style>
